<template>
  <div class="title-bg">
    <!-- <el-icon :size="20" color="#fff">
      <CaretRight />
    </el-icon>
    <span>{{ title }}</span>-->
    <!-- <video class="right-img" :src="videoSrc == 1 ? qiu : qiu2" loop autoplay="autoplay" muted></video> -->
    <img class="right-img" src="@/assets/images/home/world.gif" alt="" /> <span>{{ title }}</span>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, components } from 'vue';
import { CaretRight } from '@element-plus/icons-vue';
// import qiu from '@/assets/images/home/qiu.mp4'
// import qiu2 from '@/assets/images/home/qiu2.mp4'
export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
     videoSrc: {
      type: [String,Number],
      default: 1,
    },
  },
  setup(props) {
    const state = reactive({videoSrc:1,});
    state.videoSrc = props.videoSrc
    // console.log( state.videoSrc,99999999)
    return {
      ...toRefs(state),
      CaretRight,
    };
  },
});
</script>
<style lang="less" scoped>
.title-bg {
  padding: 0 1vw 0 0.5vw;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.6vh;
  // background: linear-gradient(90deg, #1B549F 0%, rgba(2,12,28,0.2) 100%);
  position: relative;

  span {
    line-height: 2.3vw;
    font-size: 2.2vh;
    color: #fff;
    font-weight: bold;
    font-family: YouSheBiaoTiHei;
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #668DD4, 0px 3px 0px #a0a0a0, 0px 4px 0px #153D85,
      0px 5px 10px rgba(0, 0, 0, 0.6);
  }
  .right-img {
    // margin-left: auto;
    margin-right:10px;
    width: 2.08333vw;
  }
}
</style>
